<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>红岩导航栏</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <div>
            <div class="container">
                <ul class="menu">
                    <li v-for="item in menus" :key="item.name" @mouseover="show(item)" @mouseout="unshow(item)" class="firstOrder">
                        <a :href="item.url">{{item.name}}
                            <span class="englishName">{{item.englishName}}</span>
                        </a>
                        <ul v-show="item.show" class="SecondLevel">
                            <li v-for="subitem in item.subMenus" :key="subitem.name">
                                <a :href="subitem.url">{{subitem.name}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </template>
    <script>
        const data = {
            menus: [{
                name: "首页",
                url: '#',
                englishName: "Home",
            }, {
                name: '关于红岩',
                url: '#',
                show: false,
                englishName: "HongYan",
                subMenus: [{
                    name: '红岩文化',
                    url: '#'
                }, {
                    name: '博物馆机构',
                    url: '#'
                }, {
                    name: '历史沿革',
                    url: '#'
                }]
            }, {
                name: '公告动态',
                url: '#',
                show: false,
                englishName: "Dynamics",
                subMenus: [{
                    name: '文博信息',
                    url: '#'
                }, {
                    name: '政务平台',
                    url: '#'
                }, {
                    name: '公告',
                    url: '#'
                }, {
                    name: '专题报告',
                    url: '#'
                }, ]
            }, {
                name: '馆藏精品',
                url: '#',
                show: false,
                englishName: "Collections",
                subMenus: [{
                    name: '一级文物',
                    url: '#'
                }, {
                    name: '二级文物',
                    url: '#'
                }, {
                    name: '三级文物',
                    url: '#'
                }, ]
            }, {
                name: '陈列展览',
                url: '#',
                show: false,
                englishName: "Exhibition",
                subMenus: [{
                        name: '虚拟展览',
                        url: '#'
                    }, {
                        name: '基本陈列',
                        url: '#'
                    }, {
                        name: '复原陈列',
                        url: '#'
                    }, {
                        name: '临时展览',
                        url: '#'
                    }, {
                        name: '展览交流',
                        url: '#'
                    },

                ]
            }, {
                name: '研究开发',
                url: '#',
                show: false,
                englishName: "Resarch",
                subMenus: [{
                    name: '历史研究',
                    url: '#'
                }, {
                    name: '艺术创作',
                    url: '#'
                }, {
                    name: '影音在线',
                    url: '#'
                }, {
                    name: '文创产品',
                    url: '#'
                }, ]
            }, {
                name: '公共教育',
                url: '#',
                show: false,
                englishName: "Education",
                subMenus: [{
                    name: '党性教育',
                    url: '#'
                }, {
                    name: '爱国主义教育',
                    url: '#'
                }, {
                    name: '研学实践教育',
                    url: '#'
                }, {
                    name: '科普教育',
                    url: '#'
                }, ]
            }, {
                name: '参观服务品',
                url: '#',
                show: false,
                englishName: "Service",
                subMenus: [{
                    name: '景点介绍',
                    url: '#'
                }, {
                    name: '服务内容',
                    url: '#'
                }, {
                    name: '网上预约',
                    url: '#'
                }, {
                    name: '志愿服务',
                    url: '#'
                }, ]
            }, {
                name: '网上预约',
                url: '#',
                englishName: "Reservation",
            }, ]
        }

        const app = Vue.createApp({
            template: '#root',
            data() {
                return data;
            },
            methods: {
                show(item) {
                    console.log('展示')
                    item.show = !item.show
                },
                unshow(item) {
                    console.log('不展示')
                    item.show = !item.show
                }
            }
        })
        app.mount('#app');
    </script>
</body>

</html>